<template>
	<view class="scroll-wrap" :style="getScrollWrapStyle">
		<!-- #ifdef MP-WEIXIN -->
		<scroll-view v-if="!isShowList" class="scroll-view_hold" scroll-x="true" scroll-with-animation="true"
			:scroll-left="position">
			<view v-for="(item, index) in list" :key="index" class="scroll-view-item"
				:style="choseInd === index ? getActiveStyle : getDefaultStyle" @click="onClickScrollItem(index, item)">
				{{ item }}
			</view>
			<view v-if="isUseOpenList" style="width: 62rpx; display: inline-block;">
			</view>
		</scroll-view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<scroll-view v-show="!isShowList" class="scroll-view_hold" scroll-x="true" scroll-with-animation="true"
			:scroll-left="position">
			<view v-for="(item, index) in list" :key="index" class="scroll-view-item"
				:style="choseInd === index ? getActiveStyle : getDefaultStyle" @click="onClickScrollItem(index, item)">
				{{ item }}
			</view>
			<view v-if="isUseOpenList" style="width: 62rpx; display: inline-block;">
			</view>
		</scroll-view>
		<!-- #endif -->
		<view v-if="isUseOpenList && !isShowList" class="open-list" @click="handleShowList">
			<slot name="icon-unfold">
				<img class="icon-unfold" :src="icon_unfold" />
			</slot>
		</view>
		<view v-show="isShowList" class="list-wrap bg-fff">
			<slot name="open-list-tit">
				<view class="open-list-tit flex justify-between border-bottom-solid-ccc">
					<view class="text-lineheight-lg padding-lr size-28">{{
                            openListTit
                    }}</view>
					<view class="flex align-center text-lineheight-lg padding-lr" @click="handleShowList">
						<slot name="icon-fold">
							<img class="icon-fold" :src="icon_fold" />
						</slot>
					</view>
				</view>
			</slot>

			<view class="open-list-content flex flex-wrap padding-lr padding-bottom-sm">
				<view v-for="(item, index) in list" :key="index"
					:style="choseInd === index ? getActiveStyle : getDefaultStyle" class="scroll-view-item_wrap"
					@click="onClickListItem(index, item)">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import icon_unfold from './vgt-tab/icon-unfold.svg'
	import icon_fold from './vgt-tab/icon-fold.svg'

	export default {
		name: "vgt-tab",
		props: {
			list: {
				type: Array,
				required: true,
				default: [],
			},
			isUseOpenList: {
				type: Boolean,
				default: true,
			},
			openListTit: {
				type: String,
				default: "切换",
			},
			itemStyleDefault: {
				type: Object,
				default: () => ({}),
			},
			itemStyleActive: {
				type: Object,
				default: () => ({}),
			},
			scrollWrapStyle: {
				type: Object,
				default: () => ({}),
			},
			defaultChoseInd: {
				type: Number,
				default: 0,
			},
			defaultChoseItem: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				icon_unfold: icon_unfold,
				icon_fold: icon_fold,
				scrollViewLeftArr: [], // 存储scroll信息
				choseInd: 0, // 当前选中项下标
				position: 0, // 滑动位置
				windowWidth: 0, // 页面宽度
				isShowList: false, // 是否展示为列表形式
			}
		},
		computed: {
			getDefaultStyle() {
				const {
					itemStyleDefault
				} = this
				const defaultStyleObj = {
					color: "#393939",
					background: "#f4f4f4",
				}
				return this.setStyle(defaultStyleObj, itemStyleDefault)
			},
			getActiveStyle() {
				const {
					itemStyleActive
				} = this
				const activeStyleObj = {
					color: "#3555fc",
					background: "#E9F0FD",
				}
				return this.setStyle(activeStyleObj, itemStyleActive)
			},
			getScrollWrapStyle() {
				const {
					scrollWrapStyle
				} = this

				return this.setStyle({}, scrollWrapStyle)
			}
		},
		watch: {
			list: {
				handler: function() {
					if (!this.scrollViewLeftArr.length) {
						this.getListItemScorllPos()
						this.calcDefaultChosePos()
					}
				},
				immediate: true,
				deep: true
			},
			defaultChoseInd: {
				handler: function() {
					this.calcDefaultChosePos()
				},
				immediate: true,
			},
			defaultChoseItem: {
				handler: async function() {
					this.calcDefaultChosePos()
				},
				immediate: true,
			},
			// #ifdef MP-WEIXIN
			scrollViewLeftArr: {
				handler: function(scrollViewList) {
					if (scrollViewList.length) {
						this.calcDefaultChosePos()
						console.log(scrollViewList, 'scroll')
					}
				},
			}
			// #endif
		},
		mounted() {
			this.getListItemScorllPos()
		},
		methods: {
			calcDefaultChosePos() {
				const {
					defaultChoseInd,
					defaultChoseItem
				} = this || {}

				if (defaultChoseItem) {
					const defaultItemInd = this.list.findIndex((item) => item === defaultChoseItem)
					const choseInd = defaultItemInd !== -1 ? defaultItemInd : 0
					this.calcPos(choseInd)
					return
				}

				this.calcPos(defaultChoseInd)
			},
			calcPos(choseInd) {
				setTimeout(() => {
					const currentListItem = this.scrollViewLeftArr[choseInd]
					if (currentListItem) {
						const halfPos = this.windowWidth / 2 - 30
						const currentPosition = currentListItem.left - halfPos
						this.position = currentPosition < 0 ? 1 : currentPosition
						this.choseInd = choseInd
					}
				}, 0)
			},
			async getListItemScorllPos() {
				const [_, {
					windowWidth
				}] = (await uni.getSystemInfo()) || {}
				this.windowWidth = windowWidth
				// 获取列表每个dom的偏移量
				const query = uni.createSelectorQuery().in(this)
				query.selectAll(".scroll-view-item").boundingClientRect()
				query.exec((res) => {
					res &&
						res.length &&
						res[0].forEach((element, i) => {
							const {
								left
							} = element || {}
							const posObj = {
								left: left,
							}
							this.scrollViewLeftArr.push(posObj)
						})
				})

			},
			onClickListItem(index, data) {
				this.isShowList = false
				this.calcPos(index)
				this.$emit("onValueChange", {
					currentInd: index,
					currentItem: data
				})
				this.$emit("onListShow", true)
			},
			onClickScrollItem(index, data) {
				this.calcPos(index)
				this.$emit("onValueChange", {
					currentInd: index,
					currentItem: data
				})
			},
			handleShowList() {
				this.isShowList = !this.isShowList
				this.$emit("onListShow", !this.isShowList)
			},
			setStyle(DefaultStyleObj, CurrentStyleObj) {
				Object.assign(DefaultStyleObj, CurrentStyleObj)
				let style = ""
				Object.keys(DefaultStyleObj).forEach((e) => {
					style += `${e}: ${DefaultStyleObj[e]};`
				});
				return style;
			},
		},
	};
</script>

<style scoped>
	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.padding-lr {
		padding: 0 30rpx;
	}

	.padding-bottom-sm {
		padding-bottom: 20rpx;
	}

	.justify-between {
		justify-content: space-between;
	}

	.align-center {
		align-items: center;
	}

	.text-lineheight-lg {
		line-height: 80rpx;
	}

	.border-bottom-solid-ccc {
		position: relative;
	}

	.border-bottom-solid-ccc::after {
		content: '';
		position: absolute;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		width: 200%;
		height: 1rpx;
		background: #ccc;
		border-radius: 4px;
		transform: scale(0.5);
		transform-origin: left top;
	}

	.size-28 {
		font-size: 28rpx;
	}

	.default_icon {
		width: 32rpx;
		height: 32rpx;
	}

	.scroll-view_hold {
		position: relative;
		padding: 30rpx 0 30rpx 0;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		background: #fff;
	}

	.scroll-view_hold ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.scroll-view-item {
		min-width: 120rpx;
		padding: 0 20rpx;
		display: inline-block;
		text-align: center;
		line-height: 60rpx;
		font-size: 25rpx;
		margin: 0 0 0 20rpx;
	}

	.scroll-wrap {
		position: relative;
		width: 100%;
	}

	.open-list {
		position: absolute;
		right: 0;
		top: 0;
		width: 60rpx;
		height: 100%;
		text-align: center;
		font-weight: 600;
		color: #585858;
		background: rgba(255, 255, 255, 0.7);
	}

	.scroll-view-item_wrap {
		min-width: 140rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 25rpx;
		border-radius: 32rpx;
		margin: 20rpx 0 0 30rpx;
	}

	.icon-unfold {
		width: 30rpx;
		height: 60rpx;
		padding: 30rpx 0 30rpx 0;
	}

	.icon-fold {
		width: 30rpx;
		height: 60rpx;
	}
</style>